<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset='UTF-8'>
    <meta name='referrer' content='always'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>
    <title>Document</title>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

<script>

// 引入Paper.js
paper.install(window);
 
// 设置Paper.js项目
paper.setup("canvas");
 
// 创建一个多边形
var path = new paper.Path({
    segments: [[50, 50], [150, 50], [150, 150], [50, 150]],
    strokeColor: 'black'
});
 
// 记录当前拖动的点
var draggedSegment = null;
 
// 监听鼠标按下事件
function onMouseDown(event) {
    // 获取点击的点
    draggedSegment = path.getNearestLocation(event.point).segment;
}
 
// 监听鼠标移动事件
function onMouseDrag(event) {
    // 如果有点被按下，更新它的位置
    if (draggedSegment) {
        draggedSegment.point = event.point;
    }
}
 
// 监听鼠标抬起事件
function onMouseUp(event) {
    // 停止拖动
    draggedSegment = null;
}
 
// 注册事件监听器
paper.view.onMouseDown = onMouseDown;
paper.view.onMouseDrag = onMouseDrag;
paper.view.onMouseUp = onMouseUp;
</script>